<template>
  <el-dialog
    v-model="open"
    :title="title"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="培训名称" prop="trainName">
        <el-input v-model="form.trainName" :disabled="true" />
      </el-form-item>
      <el-form-item label="原报名开始时间" prop="enrollStart">
        <el-input v-model="form.enrollStartTime" :disabled="true" />
      </el-form-item>
      <el-form-item label="原报名截止时间" prop="enrollEndTime">
        <el-input v-model="form.enrollEndTime" :disabled="true" />
      </el-form-item>
      <el-form-item label="报名延期时间" prop="enrollEnd">
        <el-date-picker
          v-model="form.enrollDelayTime"
          placeholder="请输入延期时间"
          type="datetime"
          align="right"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 350px"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from "@vue/runtime-core";
import { watch } from "vue";
import { toRefs } from "@vueuse/shared";
import { enrollDelay } from "../../../../../api/train/verity";

const { proxy } = getCurrentInstance();
const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: "",
    }),
  },
});
const emit = defineEmits(["submitForm"]);

const formBase = {};
const enrollDelayTime = undefined;

const data = reactive({
  form: {
    ...formBase,
  },
  rules: {
    enrollDelayTime: [{ required: true, message: "必填", trigger: "blur" }],
  },
});

const { open, title } = toRefs(props.props);
const { form, rules } = toRefs(data);
watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase };
    form.value.enrollDelayTime = enrollDelayTime;
    // console.log(form.value);
  } else {
    proxy.resetForm("dialogRef");
  }
});

function submitForm() {
  if (form.value.enrollDelayTime == null) {
    proxy.$modal.confirm(`请输入延期时间`);
    return;
  }
  //校验延迟时间
  let oldEndTime = Date.parse(form.value.enrollEndTime);
  let delayTime = Date.parse(form.value.enrollDelayTime);

  if (oldEndTime >= delayTime) {
    proxy.$modal.confirm(`延期时间不能小于原报名时间！`);
    return;
  }

  proxy.$refs["dialogRef"].validate((valid) => {
    if (valid) {
      enrollDelay(form.value).then(() => {
        proxy.$modal.msgSuccess("操作成功");
        open.value = false;
        emit("submitForm");
      });
    }
  });
}

function cancel() {
  open.value = false;
}
</script>

<style scoped lang="scss">
.dpflex {
  display: flex;
  span {
    margin: 0 15px;
  }
}
</style>
